<template>
  <main class="pt-10">
    <h2 class="text-center mb-1 text-sm">参数设置</h2>
    <div class="p-4">
      <el-select
        class="mb-5"
        style="width: 100%"
        v-model="config.deviceId"
        placeholder="请选择摄像头"
      >
        <el-option
          v-for="item in videoCam"
          :key="item.deviceId"
          :label="item.label"
          :value="item.deviceId"
        >
        </el-option>
      </el-select>

      <el-input class="mb-5" placeholder="请输入边框宽度" v-model="config.borderWid"></el-input>
      <el-input class="mb-5" placeholder="请输入边框颜色" v-model="config.borderCol"></el-input>
    </div>
  </main>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// import useConfig from '@renderer/composables/useConfig'
// const { config } = useConfig()
import { useConfigStore } from '@renderer/store/useConfig'
const { config } = useConfigStore()

const videoCam: any = ref([])

const getDeviece = async () => {
  const devices = await navigator.mediaDevices.enumerateDevices()
  videoCam.value = devices.filter((r) => r.kind.includes('video'))
}

onMounted(() => {
  getDeviece()
})
</script>

<style lang="less" scoped>
main {
  @apply bg-slate-400 w-screen h-screen;

  .el-form-item__content {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
